<template>
  <div>
    <el-page-header style="margin:10px 0 40px 0px;" @back="goBack" content="商家列表 / 店铺详情"></el-page-header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="商品列表" name="first"> 
              <div>
            <el-button type="primary" icon="el-icon-plus" circle></el-button>
            <el-button type="primary" icon="el-icon-search" circle></el-button>
        </div>
         <el-table :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left"
            inline
            class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <span class="choose-color">{{ '查看图片' }}</span>
            </el-form-item>
            <el-form-item label="商品规格">
              <div v-for="(item,index) in props.row.Specification"
                :key="index">
                <span>规格：</span>
                <span>{{item.sort}}</span>
                <span>  价格：</span> <span>{{item.price}}</span>
                <span>  包装费：</span> <span>{{item.fackagingFee  }}</span>

              </div>
            </el-form-item>

          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称"
        prop="name">
      </el-table-column>
      <el-table-column label="商品分类"
        prop="category">
      </el-table-column>
      <el-table-column label="商品介绍"
        prop="desc">
      </el-table-column>
    </el-table></el-tab-pane>
    <el-tab-pane label="商品分类" name="second">
                    <div>
            <el-button type="primary" icon="el-icon-plus" circle></el-button>
            <el-button type="primary" icon="el-icon-search" circle></el-button>
        </div>
      <el-card class="type-cart">
  <div v-for="item,index in typeList" :key="index" >
   <el-tag type="success"> {{item.typeName}}</el-tag>
  </div>
</el-card>
    </el-tab-pane>
  </el-tabs>
    <el-dialog title="查看图片"
      :visible.sync="dialogVisible"
      width="30%">
      <span>查看图片</span>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看规格"
      :visible.sync="dialogVisible"
      width="30%">
      <span>这是一段信息</span>
      <span slot="footer"
        class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"
          @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>


export default {
  data () {
    return {
      activeName:'first',
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        foodPic: '',
        Specification: [{ 'sort': '默认', 'price': '10', 'fackagingFee': '1' }, { 'sort': '超大分', 'price': '10', 'fackagingFee': '1' }]
      }, {
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        foodPic: '',
        Specification: [{ 'sort': '默认', 'price': '10', 'fackagingFee': '1' }, { 'sort': '超大分', 'price': '10', 'fackagingFee': '1' }]
      }, {
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333',
        foodPic: '',
        Specification: [{ 'sort': '默认', 'price': '10', 'fackagingFee': '1' }, { 'sort': '超大分', 'price': '10', 'fackagingFee': '1' }]
      },],
      typeList:[{'typeid':1,'typeName':'热销榜'},{'typeid':1,'typeName':'好吃榜'},{'typeid':1,'typeName':'热销榜2'},{'typeid':1,'typeName':'热销榜3'},]
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }

}
</script>

<style lang="scss">
.type-cart{
  text-align: center;
  width: 50%;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.choose-color {
  color: #ff884d;
  cursor: pointer;
}
</style>